<template>
<h2>子级组件</h2>
<h4>{{msg}}</h4>
<button @click="update">更新数据</button>
</template>
<script lang="ts">
import { defineComponent, ref, onBeforeMount, onMounted,onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default defineComponent ({
    name: 'Child',
    // vue2.x中的生命周期钩子
    beforeCreate() {
        console.log('2.x中的beforeCreate')
    },
    created() {
        console.log('2.x中的created')
    },
    beforeMount(){
        console.log('2.x中的beforeMount')
    },
    mounted() {
        console.log('2.x中的mounted')
    },
    beforeUpdate() {
        console.log('2.x中的beforeUpdate')
    },
    updated() {
        console.log('2.x中的updated')
    },
    // vue2.x中的beforeDestroy,destroyed改名
    beforeUnmount() {
        console.log('2.x中的beforeDestroy')
    },
    unmounted() {
        console.log('2.x中的destroyed')
    },
    setup() {
        console.log('vue3.x中的beforeCreate,created')
        const msg = ref('abc')
        const update = () => {
            msg.value += 'd'
        }
        onBeforeMount(() => {
             console.log('3.x中的onBeforeMount')
        })
        onMounted(() => {
             console.log('3.x中的onMounted')
        })
        onBeforeUpdate(() => {
             console.log('3.x中的onBeforeUpdate')
        })
        onUpdated(() => {
             console.log('3.x中的onUpdated')
        })
        onBeforeUnmount(() => {
             console.log('3.x中的onBeforeUnmount')
        })
        onUnmounted(() => {
             console.log('3.x中的onUnmounted')
        })
        return {
            msg,
            update
        }
    }
})
</script>
<style>
</style>